<script setup>

import {Check, Delete, Edit, RefreshRight} from "@element-plus/icons-vue";
import {onMounted, reactive, ref} from "vue";
import {doDelete, doGet, doPost, doPostParams} from "@/util/HttpRequest.js";
import {ElMessage, ElMessageBox} from "element-plus";
let addOrEditFormRef = ref();
let loading= ref(false)
const tableData = ref([])
let productForm = reactive({})
const productFormRules = reactive({
  productCode:[
    {required:true,message:'请输入支付产品编号',trigger:"blur"}
  ],
  productName:[
    {required:true,message:'请输入支付产品名称',trigger:"blur"}
  ],
})

let dialogVisible = ref(false)

let addOrEdit = true
let ids=[]

onMounted(()=>{
  loadTableData()
})
const resetForm = () =>{
  Object.keys(productForm).forEach((key)=>{
    productForm[key]=''
  })
  loadTableData()
}
const handleSwitchChange = (row) =>{
  doPostParams('/product/changeStatus',{id:row.id,status:row.status}).then(resp=>{
    if(resp.data.code===200){
      loadTableData()
      ElMessage.success(resp.data.msg);
    }else{
      ElMessage.error('状态修改失败');
    }
  })
}

const loadTableData = async () => {
  loading.value=true;
  await doGet('/product/getProductTable').then(resp=>{
    if(resp.data.code===200){
      tableData.value=resp.data.info;
    }
  }).finally(()=>{
    loading.value=false;
  })
}
const addProduct = () =>{
  addOrEdit = true
  dialogVisible.value=true

}
const submitForm = async(addOrEditFormRef) =>{
  if(!addOrEditFormRef){
    return
  }
  await addOrEditFormRef.validate((valid)=>{
    if(valid){
      doPost('/product/'+(addOrEdit?'addProduct':'editProduct'),productForm).then(resp=>{
        if(resp.data.code===200){
          ElMessage.success(addOrEdit?'添加':'编辑'+'成功')
          dialogVisible.value=false
          resetForm();
        }else{
          ElMessage.error(addOrEdit?'添加':'编辑'+'失败')
        }
      })
    }else{
      ElMessage.error('表单校验失败')
    }
  })
}
const editProduct = (row) => {
  addOrEdit=false
  productForm=row
  dialogVisible.value=true
}
const singleDelete = (id)=>{
  ElMessageBox.confirm('确定删除吗?').then(()=>{
    doGet('/product/singleDeleteProduct', {id:id}).then(resp=>{
      if(resp.data.code===200){
        loadTableData()
        ElMessage.success(resp.data.msg);
      }else{
        ElMessage.error('用户删除失败');
      }
    })
  }).catch(()=>{
    ElMessage.warning('取消删除')
  })
}
const handleSelectionChange = (rows)=>{
  ids=[]
  for(let i=0;i<rows.length;i++){
    ids[i]=rows[i].id;
  }
  ids = ids.join(",")
  console.log(ids)
}
const batchDelete = ()=>{
  ElMessageBox.confirm('确定删除吗?').then(()=>{
    if(ids.length>0){
      doDelete('/product/batchDeleteProduct',{ids:ids}).then(resp=>{
        if(resp.data.code===200){
          loadTableData()
          ElMessage.success(resp.data.msg);
        }else{
          ElMessage.error('用户删除失败')
        }
      })
    }else{
      ElMessage.error('请选择要删除的用户')
    }
  }).catch(()=>{
    ElMessage.warning('取消删除')
  })
}
</script>

<template>
    <el-table :data="tableData" style="width: 100%;height: 100%" @selection-change="handleSelectionChange"
              v-loading="loading"
    >
      <el-table-column fixed type="selection" width="60" align="center"/>
      <el-table-column prop="productCode" label="支付产品编号" width="230" align="center"/>
      <el-table-column prop="productName" label="支付产品名称" width="230" align="center"/>
      <el-table-column prop="status" label="产品状态" width="230" align="center">
        <template #default="scope">
          <el-switch
              v-model="scope.row.status"
              active-value="ENABLE"
              inactive-value="DISABLE"
              @change="handleSwitchChange(scope.row)"
              class="ml"
              style="--el-switch-on-color: #13ce66; --el-switch-off-color: #6b6b6b"
          />
        </template>
      </el-table-column>
      <el-table-column prop="editTime" label="编辑时间" width="360" align="center"/>
      <el-table-column fixed="right" width="135" align="center">
        <template #header="scope">
          <el-button size="small" @click="addProduct()">
            添加
          </el-button>
          <el-button size="small" @click="batchDelete()">删除</el-button>
        </template>
        <template #default="scope">
          <el-button  @click="editProduct(scope.row)" size="small" circle><el-icon><Edit /></el-icon></el-button>
          <el-button class="b2" @click="singleDelete(scope.row.id)" size="small" circle>
            <el-icon><Delete /></el-icon>
          </el-button>
        </template>
      </el-table-column>
    </el-table>
  <el-dialog :title="addOrEdit?'添加':'编辑'" v-model="dialogVisible" align-center style="text-align: center" :destroy-on-close="true">
    <el-form ref="addOrEditFormRef" :model="productForm" label-width="auto" :rules="productFormRules">
      <el-form-item label="支付产品编号" prop="productCode">
        <el-input v-model="productForm.productCode" size="large"/>
      </el-form-item>
      <el-form-item label="支付产品名称" prop="productName">
        <el-input v-model="productForm.productName" size="large"/>
      </el-form-item>
      <el-form-item style="margin-left: 43%">
        <el-button color="#000000" @click="submitForm(addOrEditFormRef)"><el-icon><Check /></el-icon></el-button>
        <el-button @click="resetForm"><el-icon><RefreshRight /></el-icon></el-button>
      </el-form-item>
    </el-form>
  </el-dialog>
</template>

<style scoped>
  .b2{
    margin-left: 35px;
  }
</style>